<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
        <link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/head.css"/>
	</head>
	<body>	
	<!--  ===-->
	<div class="head">
						<div class="line1">
							<span class="log">
								<a href="index.html">
								<img src="img/logo/yinLogo.png" >
							</a>
							</span>
						<ul>
							<li><a href="#">官方微博</a></li>
							<li><a href="#">关注微信</a></li>
							<li><a href="reading.html">购物须知</a></li>
						</ul>
						</div>
						
						
						<div class="line2">
							<span class="log">
								<a href="index.html">
								<img src="img/logo/shop-logo-v1.png" >
								</a>
							</span>
							<div >
								<input type="text" class="search" name="" id="" value="" />
								<span class="btn"></span>
							</div>
							<ul>
								<li class="l1"></li>
								<li><a href="#" class="denglu">登录</a></li>
								<li><a href="#">我的订单</a></li>
								<span class="l2"></span>
								<li><a href="#"> 购物车</a></li>
							</ul>
							
						</div>
				<!-- 登录内页面显示 -->	
			<script type="text/javascript">
				window.onload=function(){
					var denglu=document.querySelector(".denglu");
					denglu.onclick=function(){
						var box=document.querySelector(".box");
						box.style.display="flex";
					}
					var close=document.querySelector(".close");
					close.onclick=function(){
					var box =document.querySelector(".box");
					box.style.display="none";
					}
					
					
					var forms=document.querySelectorAll(".box .text form");
					var btns=document.querySelectorAll(".box .title a");
					for(var i=0;i<btns.length;i++){
						btns[i].onclick=function(){
							for (var j=0;j<btns.length;j++) {
								btns[j].className= "";
							}
							this.className="active";
					var idx=this.attributes["data-idx"].value;
							console.log(idx);
							for(var j=0;j<forms.length;j++){
								forms[j].style.display="none";
							}
							forms[idx].style.display="block";
						}
					}
					
					
				}
			</script>			
						<div class="xian"></div>
				     <div class="line3">
						 <span class="title">艺人分类</span>
						 <ul>
						 	<li><a href="index.html">首页</a></li>
						 	<li><a href="list.html">专辑</a></li>
						 	<li><a href="index.html">明显周边</a></li>
						 	<li><a href="index.html">明星同款</a></li>
						 	<li><a href="index.html">个护美妆</a></li>
						 	<li><a href="index.html">影漫周边</a></li>
						 	<li><a href="index.html">食品</a></li>
						 	<li><a href="index.html">服装配饰</a></li>
						 </ul>
								 
					 </div>
						</div>
						
					</div>
					<div class="zc">
						<div class="content">
								<div class="box">
									<div class="right">
								<div class="title">
									<a href="#" class="active" data-idx="0">登录</a>
									<a href="#" data-idx="1" >注册</a>
								</div>
								<div class="text">
									<form action="#" method="get">
										<div>
											<input type="text" name="name" id="name" value="" placeholder="请输入账号或邮箱"/>
										</div>
										<div>
											<input type="password" name="pwd" id="pwd" value="" placeholder="请输入密码"/>
										</div>
										<div>
											<input type="checkbox" name="chk" id="chk" value="" />
										<label for="chk">自动登录</label>
										</div>
										<div><input type="submit" value="登录"/></div>	
									</form>
								
								<form action="" method="get">
								<div>
									<input type="text" name="name" id="name" value="" placeholder="请输入账号或邮箱"/>
								</div>
								<div>
									<input type="password" name="pwd" id="pwd" value="" placeholder="请输入密码"/>
								</div>
								<div>
									<input type="text" name="yzm" id="yzm" value="" class="yanz" placeholder="请输入验证码" />
									<input type="button" name="" id="" value="获取验证码" class="yanz1"/>
								
								</div>
								<div><input type="submit" value="立即注册"/></div>	
								
								</form>
								</div>
								</div>
								<span class="close">&times;</span>
								      </div>
									  
							</div>
							
					</div>
	<!-- ========================================== -->				
					
					<div class="content">
						<div class="banner">
					<!-- 轮播图 -->
							<!-- <img src="img/banner/1.jpg" > -->
							<div class="swiper mySwiper">
							  <div class="swiper-wrapper">
							    <div class="swiper-slide"><img src="img/banner/1.jpg" ></div>
							    <div class="swiper-slide"><img src="img/banner/2.jpg" ></div>
							    <div class="swiper-slide"><img src="img/banner/3.jpg" ></div>
							      <div class="swiper-slide"><img src="img/banner/4.jpg" ></div>
							  </div>
							  <div class="swiper-button-next"></div>
							  <div class="swiper-button-prev"></div>
							  <div class="swiper-pagination"></div>
							</div>
							<script src="./js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>
						<script>
						  var swiper = new Swiper(".mySwiper", {
						    cssMode: true,
						    navigation: {
						      nextEl: ".swiper-button-next",
						      prevEl: ".swiper-button-prev",
						    },
						    pagination: {
						      el: ".swiper-pagination",
						    },
						    mousewheel: true,
						    keyboard: true,
						  });
						</script>
						</div>
						<div class="star">
						<div class="title"></div>
						<ul>
							<li><a href=""><img src="img/necessary-1.png" alt=""><span>官方应援手灯专区</span></a></li>
							<li><a href=""><img src="img/necessary-2.gif" alt=""><span>官方应援手稿专区</span></a></li>
							<li><a href=""><img src="img/necessary-3.png" alt=""><span>签名商品专区</span></a></li>
							<li><a href=""><img src="img/necessary-4.gif" alt=""><span>官方DVD专区</span></a></li>
							<li><a href=""><img src="img/special.jpg" alt=""></a></li>
						</ul>		
						</div>
						<div class="top">
							<div class="title">
								
							</div>
							<ul>
								<li><a href="list.html"><img src="img/top/a/toplist_a01.jpg" alt=""></a><span>薛之谦</span></li>
								<li><a href="list.html"><img src="img/top/a/toplist_a02.jpg" alt=""></a><span>iKON</span></li>
								<li><a href="list.html"><img src="img/top/a/toplist_a03.jpg" alt=""></a><span>鹿晗</span></li>
								<li><a href="list.html"><img src="img/top/a/toplist_a04.jpg" alt=""></a><span>GOT7</span></li>
								<li><a href="list.html"><img src="img/top/a/toplist_a05.jpg" alt=""></a><span>EXO</span></li>
								<li><a href="list.html"><img src="img/top/a/toplist_a06.jpg" alt=""></a><span>Astro（韩国）</span></li>
								<li><a href="list.html"><img src="img/top/a/toplist_a07.jpg" alt=""></a><span>Winner</span></li>
								<li><a href="list.html"><img src="img/top/a/toplist_a08.jpg" alt=""><span>BigBang</span></a></li>
							
							</ul>
						</div>
						
						<div class="list">
							<div class="title">
								
							</div>
							<ul>
								<li><a href="list.html">
										<img src="img/pro/1.jpg" alt="">
										<div class="right">
											<span class="title">【现货包邮】加一联创1 more bear 万魔熊头</span>
											<span class="money">￥50</span>
											<div><span class="love"></span><span class="num">0</span></div>
										</div>
									</a></li>
								<li><a href="list.html">
										<img src="img/pro/2.jpg" alt="">
										<div class="right">
											<span class="title">【现货包邮】加一联创1 more bear 万魔熊头</span>
									<span class="money">￥50</span>
										<div><span class="love"></span><span class="num">0</span></div>
										</div>
									</a></li>
								<li><a href="list.html">
										<img src="img/pro/3.jpg" alt="">
										<div class="right">
											<span class="title">【现货包邮】加一联创1 more bear 万魔熊头</span>
									<span class="money">￥50</span>
										<div><span class="love"></span><span class="num">0</span></div>
										</div>
									</a></li>
								<li><a href="list.html">
										<img src="img/pro/4.jpg" alt="">
										<div class="right">
											<span class="title">【现货包邮】加一联创1 more bear 万魔熊头</span>
									<span class="money">￥50</span>
										<div><span class="love"></span><span class="num">0</span></div>
										</div>
									</a></li>
								<li><a href="list.html">
										<img src="img/pro/5.jpg" alt="">
										<div class="right">
											<span class="title">【现货包邮】加一联创1 more bear 万魔熊头</span>
									<span class="money">￥50</span>
										<div><span class="love"></span><span class="num">0</span></div>
										</div>
									</a></li>
								<li><a href="list.html">
										<img src="img/pro/6.jpg" alt="">
										<div class="right">
											<span class="title">【现货包邮】加一联创1 more bear 万魔熊头</span>
									<span class="money">￥50</span>
										<div><span class="love"></span><span class="num">0</span></div>
										</div>
									</a></li>
								<li><a href="list.html">
										<img src="img/pro/7.jpg" alt="">
										<div class="right">
											<span class="title">【现货包邮】加一联创1 more bear 万魔熊头</span>
									<span class="money">￥50</span>
										<div><span class="love"></span><span class="num">0</span></div>
										</div>
									</a></li>
								<li><a href="list.html">
										<img src="img/pro/8.jpg" alt="">
										<div class="right">
											<span class="title">【现货包邮】加一联创1 more bear 万魔熊头</span>
									<span class="money">￥50</span>
										<div><span class="love"></span><span class="num">0</span></div>
										</div>
									</a></li>
								<li><a href="list.html">
										<img src="img/pro/9.jpg" alt="">
										<div class="right">
											<span class="title">【现货包邮】加一联创1 more bear 万魔熊头</span>
									<span class="money">￥50</span>
										<div><span class="love"></span><span class="num">0</span></div>
										</div>
									</a></li>
							</ul>
						</div>
						
					</div>
					
		<!-- ============================================== -->			
			
				<div class="fot">
					<div class="foot">
						<ul>
							<li><a href="#">关于我们</a></li>
							<li><a href="#">人才招聘</a></li>
							<li><a href="#">联系我们</a></li>
							<li><a href="#">友情链接</a></li>
							<li><a href="#">版权说明</a></li>
							<li><a href="#">客服中心</a></li>
						</ul>
						<div class="z">
							<img src="img/culture.png"  class="zhi">
							<span>Copyright@2009-2016yinyuetai.com广播电视节目制作经营许可证编号（京）字第1891号丨京网文【2014】2037-287号</span>
							<span class="w"><a href="">网络视听许可证0110413号</a></span>
							<p>京公安网备案1101050201490号丨京ICP备11024134号-1丨京ICP证060716号丨出版物经营许可证新出发零字第朝130062号丨增值电信业务营业许可证B2-20140501</p>
							
							<p>食品许可s证：JY11105040485363丨营业执照</p>
						<div class="an"></div>
						</div>
						
					</div>
				</div>
	</body>
</html>
